<template>
  <div class="echarts_box">
    <div
      class="echarts_box"
      ref="echarts_box"
      :style="{ opacity: data.length == 0 ? '0' : '1' }"
    ></div>
    <!---------------------- 无数据时显示 ---------------------->
    <Nodata class="Nodata" v-show="data.length == 0"></Nodata>
  </div>
</template>

<script>
// const elementResizeDetectorMaker = require("element-resize-detector");
export default {
  mounted() {},
  computed: {
    // ...mapGetters(["echartsColor"]),
  },
  watch: {
    data: "drawLine", // 数值变化是更新图表
    barWidth: "drawLine", // 数值变化是更新图表
    gridBottom: "drawLine", // 数值变化是更新图表
    fontSize: "drawLine", // 数值变化是更新图表
    offset: "drawLine", // 数值变化是更新图表
    nameStyle: "drawLine", // 数值变化是更新图表
    nameLength: "drawLine", // 数值变化是更新图表
  },
  props: {
    nameLength: {
      type: [Number, String],
      default: 17,
    },
    gridBottom: {
      type: String,
      default: "-10%",
    },
    offset: {
      type: [Number, String],
      default: -12,
    },
    nameStyle: {
      type: Array | Object,
      default: function () {
        return [0, "-17px"];
      },
    },
    barWidth: {
      type: [Number, String],
      default: 5,
    },
    fontSize: {
      type: [Number, String],
      default: 14,
    },
    length: {
      type: String | Number,
      default: () => 5,
    },
    data: {
      // 返回的数据
      type: Array | Object,
      default: function () {
        return [ ];
      },
    },
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      try {
        var cw = document.body.clientWidth;
        this.$nextTick(() => {
          let myData = this.data;
          if (myData.length > this.length) {
            myData = myData.slice(0, this.length);
          }
          let myChart = this.$echarts.init(this.$refs.echarts_box);
          var colorList = [
            "#FF4618",
            "#FF6600",
            "#E4AB00",
            "#07C8FF",
            "#07C8FF",
          ];
          const img1 =
            "";
          const img2 =
            "";
          const img3 =
            "";
          const img4 =
            "";
          const img5 =
            "";

          let option = {
            tooltip: {
              show: true,
              // confine: true,
              backgroundColor: "rgba(0,74,174,0.9)", //设置背景颜色
              textStyle: {
                fontSize: 14,
                color: "rgba(255,255,255,1)", //设置文字颜色
                fontFamily: "PingFang SC",
              },
              trigger: "item",
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
              },
            },
            legend: {
              show: false,
            },
            grid: {
              left: "0%",
              right: "8%",
              top: "5%",
              bottom: this.gridBottom,
              containLabel: true,
            },
            xAxis: {
              show: false,
              type: "value",
            },
            yAxis: [
              {
                type: "category",
                inverse: true,

                axisLine: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
                axisPointer: {
                  label: {
                    show: true,
                    margin: 30,
                  },
                },
                data: myData.map((item) => item.name),
                axisLabel: {
                  margin: 15,
                  fontSize: 12,
                  align: "left",
                  color: "rgba(193,240,254,0.6)",
                  rich: {
                    a1: {
                      color: "#fff",
                      backgroundColor: {
                        image: img1,
                      },

                      width: 13,
                      height: 17,
                      align: "center",
                      borderRadius: 2,
                    },
                    a2: {
                      color: "#fff",
                      backgroundColor: {
                        image: img2,
                      },
                      width: 13,
                      height: 17,
                      align: "center",
                      borderRadius: 2,
                    },
                    a3: {
                      color: "#fff",
                      backgroundColor: {
                        image: img3,
                      },
                      width: 13,
                      height: 17,
                      align: "center",
                      borderRadius: 2,
                    },
                    a4: {
                      color: "#fff",
                      backgroundColor: {
                        image: img4,
                      },
                      width: 13,
                      height: 17,
                      align: "center",
                      borderRadius: 2,
                    },
                    a5: {
                      color: "#fff",
                      backgroundColor: {
                        image: img5,
                      },
                      width: 13,
                      height: 17,
                      align: "center",
                      borderRadius: 2,
                    },
                    b: {
                      color: "rgba(193,240,254,0.6)",
                      width: 20,
                      height: 17,
                      align: "center",
                      borderRadius: 2,
                    },
                  },
                  formatter: (params) => {
                    var index = myData.map((item) => item.name).indexOf(params);
                    index = index + 1;
                    if (index - 1 < 5) {
                      return ["{a" + index + "|" + "" + "}"].join("\n");
                    } else {
                      return ["{b|" + index + "}"].join("\n");
                    }
                  },
                },
              },
              {
                type: "category",
                inverse: true,
                axisTick: "none",
                // offset: this.offset,
                axisLine: "none",
                show: true,
                position: "",
                data: myData.map((item) => item.value),
                axisLabel: {
                  show: true,
                  fontSize: this.fontSize,
                  // color: "yellow",
                  formatter: (value, index) => {
                    if (index == 0) {
                      return ["{a" + 1 + "|" + myData[0].value + "}"];
                    } else if (index == 1) {
                      return ["{a" + 2 + "|" + myData[1].value + "}"];
                    } else if (index == 2) {
                      return ["{a" + 3 + "|" + myData[2].value + "}"];
                    } else if (index == 3) {
                      return ["{a" + 4 + "|" + myData[3].value + "}"];
                    } else if (index == 4) {
                      return ["{a" + 5 + "|" + myData[4].value + "}"];
                    } else {
                      return ["{b|" + myData[index].value + "}"].join("\n");
                    }
                    // return "    {text"+index+"|" + value + "}"
                  },
                  textStyle: {
                    rich: {
                      a1: {
                        color: colorList[0],
                        fontSize: this.fontSize,
                        fontFamily: "Furore",
                      },
                      a2: {
                        color: colorList[1],
                        fontSize: this.fontSize,
                        fontFamily: "Furore",
                      },
                      a3: {
                        color: colorList[2],
                        fontSize: this.fontSize,
                        fontFamily: "Furore",
                      },
                      a4: {
                        color: colorList[3],
                        fontSize: this.fontSize,
                        fontFamily: "Furore",
                      },
                      a5: {
                        color: colorList[4],
                        fontSize: this.fontSize,
                        fontFamily: "Furore",
                      },
                      b: {
                        color: colorList[5],
                        fontSize: this.fontSize,
                        fontFamily: "Furore",
                      },
                    },
                  },
                },
              },
            ],
            // series: [
            //   {
            //     type: 'bar', barWidth: 10, stack: 'total', data: this.seriesData,
            //     itemStyle: {
            //       normal: {
            //         color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
            //           // 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐
            //           // 变。offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。
            //           offset: 0,
            //           color: '#4d76ff'
            //         }, {
            //           offset: 1,
            //           color: '#80aaff'
            //         }]),
            //       }
            //     },
            //   }
            // ],
            series: [
              {
                z: 2,
                type: "bar",
                barCategoryGap: "40%",
                barGap: "20%",
                barWidth: this.barWidth,
                data: myData.map((item, i) => {
                  var itemStyle = {
                    // color: i > 5 ? colorList[5] : colorList[i],
                    // colorStops: [
                    //   {
                    //     offset: 0,
                    //     color: "rgba(9,55,98,0.5)",
                    //   },
                    //   {
                    //     offset: 1,
                    //     color: "green",
                    //   },
                    // ],
                    normal: {
                      color: new this.$echarts.graphic.LinearGradient(
                        1,
                        0,
                        0,
                        0,
                        [
                          {
                            // 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐
                            // 变。offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。
                            offset: 0,
                            color: colorList[i],
                          },
                          {
                            offset: 1,
                            color: colorList[i] + "30",
                          },
                        ]
                      ),
                      barBorderRadius: [10, 10, 10, 10],
                    },
                  };
                  return {
                    value: item.value,
                    itemStyle: itemStyle,
                  };
                }),
                label: {
                  normal: {
                    color: "rgba(255,255,255,1)",
                    fontFamily: "PingFang SC",
                    show: true,
                    position: this.nameStyle,
                    textStyle: {
                      fontSize: 11,
                    },
                    formatter:  (a, b)=> {
                      // return a.name;
                      return a.name.length > this.nameLength
                        ? a.name.slice(0, this.nameLength) + "..."
                        : a.name;
                    },
                  },
                },
              },
            ],
          };

          myChart.setOption(option);
          /* 大小自适应 */
          window.addEventListener("resize", () => {
            // h = this.$refs.echarts_box.offsetHeight;
            // console.log(h);
            myChart.resize();
          });
          myChart.resize();
        });
      } catch (e) {
        console.log(e);
        // 错误处理代码片段
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.echarts_box {
  width: 100%;
  height: 100%;
  position: relative;

  .Nodata {
    position: absolute;
    top: 0;
    z-index: 10;
  }
}
</style>